/* CSS Boiler Plate Start*/

  *{
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    text-decoration: none;
    scroll-behavior: smooth;
    
}
/* CSS Boiler Plate End */


  /* Defined Constant (Root) Start   */
    
  :root {
    --text-color: #0000;
    --secondary-color: #5151ef;
    --main-color: white;
    --sub-text-color: #808080;
    --pane-padding: 32px 100px;
    --primary-font-family: 'Poppins', sans-serif;
    --primary-font-weight: 450; 
    --primary-font-style: normal;
    --primary-font-size: 22px;
    --box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    
    
    }
   /* Defined Constant (Root) End */


  /* Team Start  */
  .team-page{
    padding-top: 100px;
    background-color: var(--main-color);
    h2{
        text-align: center;
        font-size: 52px;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        padding-bottom: 20px;
        
    }
    h3{
       text-align: center; 
       font-size: 22px;
       font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        margin-top: -10px;
        color: var(--secondary-color);
    }
    p{
       text-align: center; 
       padding-left: 120px;
       padding-right: 120px;
       font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: var(--sub-text-color);
        font-size: 18px;
        padding-top: 10px;
    }
  }


  .team-pg-container{ 
    width: 100%;
    height: 100vh;
    display: flex;

  }

  .team-page-left{
    height: auto;
    width: 50%;
    
   
    h1{
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      font-style: normal;
      font-size: 60px;
      padding-left: 100px;
      padding-top: 100px;
      
    }

    p{
      font-family: "Poppins", sans-serif;
      font-weight: 450;
      font-style: normal;
      font-size: 22px;
      padding-left: 100px;
      padding-top: 20px;
      color: var(--sub-text-color);
    }
  }


  .team-page-right{
    height: auto;
    width: 50%;

    img{
      width: 70%;
      height: auto;
      position: relative;
      top: 230px;
      left: 100px;
    }
  }


  .team-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 100px;
  }

  .team-member{
    margin: 15px;
    width: 400px;
    height: 400px;
    background-color: var(--main-color); 
    border-radius: 10px; 
    box-shadow: var(--box-shadow); 
    padding: 20px; 
    text-align: center; 
    transition: transform 0.3s;
    overflow: hidden;

    img{
      width: 200px;
      height: 200px;
      border-radius:10px;
      object-fit: cover;
      margin-bottom: 15px;
      transition: ease-in-out 1.2s;
       
    }

    h3 {
      font-size: 1.2em;
      margin-bottom: 5px;
      
      font-family: var(--primary-font-family);
      font-weight: var(--primary-font-weight);
      transition: ease-in-out 1.2s;
      
      }



      p { 
      font-size: 0.9em;
      color: var(--sub-text-color);
      font-family: var(--primary-font-family);
      font-weight: var(--primary-font-weight);
      transition: ease-in-out 1.2s;
      

     }

     h4{
      font-size: 1em;
      align-self: center;
      color: var(--sub-text-color);
      font-family: var(--primary-font-family);
      font-weight: var(--primary-font-weight);
      transition: ease-in 1s ;
      
    
      
      opacity: 0%;
     }

  }


  .team-member:hover { 
    /* transform: translateY(-50px);  */
    img{
      width: 100px;
      height: 100px;
      border-radius:50px;
      transform: translateX(-150px); 
      
    }

    h3{
      transform: translateY(-100px); 
     
    }
    p{
      transform: translateY(-105px);
    }
    h4{
      opacity: 100%;
    }
    }
  /* Team End  */



  /* Responsive Start  */
  @media (max-width:617px) {
    .team-page{
        h2{
            font-size: 32px;
        }

        p{
            font-size: 14px;
            line-height: 18px;
            padding-left: 30px;
        padding-right: 30px;
        }
    }

   

      
  }




  /* Responsive End  */